<template>
  <div class="rightClickMenu" :style="justifyContent">
    <div class="right-click-menu">
      <!-- 打开主窗口 -->
      <div class="right-click-menu-item" @click="onOpenLight">{{ $t('rightClickMenu.openMainWindow') }}</div>
      <!-- 隐藏AI助手 -->
      <div class="right-click-menu-item" @click="onHideAiAssistant">{{ $t('rightClickMenu.hideAIAssistant') }}</div>
      <!-- 设置 -->
      <div class="right-click-menu-item" @click="onOpenSettings">{{ $t('rightClickMenu.settings') }}</div>
      <!-- 退出AI助手 -->
      <div class="right-click-menu-item" @click="onExitApplication">{{ $t('rightClickMenu.exitAIAssistant') }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ipcMainApi from '@/ipcMainApi'

// 打开主窗口
const onOpenLight = () => {
  ipcMainApi.aiAssistantApi.openLightbox()
  ipcMainApi.aiAssistantApi.hideRightClickMenu()
}
// 隐藏AI助手
const onHideAiAssistant = () => {
  ipcMainApi.aiAssistantApi.hideAiAssistant()
  ipcMainApi.aiAssistantApi.hideRightClickMenu()
}
// 退出AI助手
const onExitApplication = () => {
  ipcMainApi.aiAssistantApi.hideRightClickMenu()
  ipcMainApi.aiAssistantApi.exitApplication()
}

const onOpenSettings = () => {
  ipcMainApi.browserViewApi.createSettingTab()
}

const justifyContent = ref({
  justifyContent: 'start'
})
onMounted(async () => {
  window.electron.ipcRenderer.on('right-click-menu-is-left-show', (_event, data) => { // 监听是否贴边窗口显示
    if (data) {
      justifyContent.value.justifyContent = 'end'
    } else {
      justifyContent.value.justifyContent = ''
    }
  })
})

</script>

<style lang="scss" scoped>
.rightClickMenu {
  width: 100vw;
  height: 100vh;
  display: flex;
  user-select: none; /* 不允许鼠标复制 */
  // background-color: red;
}
.rightClickMenu-content {
  border-radius: 6px;
  padding: 6px;
  background-color: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}
.right-click-menu {
  border-radius: 8px;
  padding: 8px 5px;
  overflow: hidden;
  background: #3c3c3c;
  .right-click-menu-item {
    font-size: 12px;
    color: #efefef;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 5px;
    margin-bottom: 4px;
    &:hover {
      background-color: #5e5e5e;
    }
  }
}
</style>
